import {View, Picker, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import {store} from "../../store/store";
import icon from '../../asset/images/xia.png'
import './listHead.scss';

class ListHead extends Taro.Component {
    config = {
        component: true,
        componentGenerics: {
            Prompt: true
        }
    };

    state = {
        selectWrap: [],

        typeSelectWrap: [],
        typeSelectWrapText: [],
        typeSelect: '全部',
        typeSelectId: -1,

        typeNameWrap: [],
        typeNameWrapText: [],
        typeName: '全部',
        typeNameId: -1,

        typeAreaWrap: [],
        typeAreaWrapText: [],
        typeArea: '全部',
        typeAreaId: '',
        regionStatus: '',

        typeTimeWrap: [],
        typeTimeWrapText: [],
        typeTime: '全部',
        typeTimeId: -1,

        typeMoneyWrap: [],
        typeMoneyWrapText: [],
        typeMoney: '全部',
        typeMoneyId: -1,
    };

    componentWillMount() {
        const {onRegionStatus} = this.props;
        this.setState({
            selectWrap: store.getState().getData,
            regionStatus: onRegionStatus,
        }, () => {
            const {selectWrap} = this.state;
            let name = [], name1 = [], name2 = [], name3 = [], name4 = [];
            selectWrap.classTypes.forEach((item) => {
                name.push(item.classTypeName);
            });
            selectWrap.regions.forEach((item) => {
                name1.push(item.description);
            });
            selectWrap.periods.forEach((item) => {
                name2.push(item.periodName);
            });
            selectWrap.prices.forEach((item) => {
                name3.push(item.priceName);
            });
            selectWrap.classScales.forEach((item) => {
                name4.push(item.scaleName);
            });
            this.setState({
                typeNameWrap: selectWrap.classTypes,
                typeNameWrapText: name,
                typeAreaWrap: selectWrap.regions,
                typeAreaWrapText: name1,
                typeTimeWrap: selectWrap.periods,
                typeTimeWrapText: name2,
                typeMoneyWrap: selectWrap.prices,
                typeMoneyWrapText: name3,
                typeSelectWrap: selectWrap.classScales,
                typeSelectWrapText: name4,
            })
        })
    }

    componentWillReceiveProps = (nextProps) => {
        const {onRegionStatus} = this.props;
        console.log(onRegionStatus + 'onRegionStatus');
        if ((nextProps.onRegionStatus && onRegionStatus !== nextProps.onRegionStatus)) {
            this.setState({
                regionStatus: nextProps.onRegionStatus,
            })
        }
    };

    //筛选选择器
    onChangeType = (name, res) => {
        const {typeNameWrap, typeAreaWrap, typeTimeWrap, typeMoneyWrap, typeSelectWrap} = this.state;
        let type = '';
        let typeId = '';
        if (name == 'typeName') {
            type = typeNameWrap[res.detail.value].classTypeName;
            typeId = typeNameWrap[res.detail.value].classTypeID;
            this.setState({
                typeName: type,
                typeNameId: typeId,
            }, () => {
                this.goType();
            });
        }
        if (name == 'typeArea') {
            type = typeAreaWrap[res.detail.value].description;
            typeId = typeAreaWrap[res.detail.value].regionId;
            let typeStatus = typeAreaWrap[res.detail.value].parentRegionId;
            console.log(typeId +'typeId');
            this.setState({
                typeArea: type,
                typeAreaId: typeId == -1 ? typeStatus : typeId,
                regionStatus: typeId || -1,
            }, () => {
                this.goType();
            });
        }
        if (name == 'typeTime') {
            type = typeTimeWrap[res.detail.value].periodName;
            typeId = typeTimeWrap[res.detail.value].periodID;
            this.setState({
                typeTime: type,
                typeTimeId: typeId,
            }, () => {
                this.goType();
            });
        }
        if (name == 'typeMoney') {
            type = typeMoneyWrap[res.detail.value].priceName;
            typeId = typeMoneyWrap[res.detail.value].priceID;
            this.setState({
                typeMoney: type,
                typeMoneyId: typeId,
            }, () => {
                this.goType();
            });
        }
        if (name == 'typeSelect') {
            type = typeSelectWrap[res.detail.value].scaleName;
            typeId = typeSelectWrap[res.detail.value].scaleId;
            this.setState({
                typeSelect: type,
                typeSelectId: typeId,
            }, () => {
                this.goType();
            });
        }
    };

    goType = () => {
        const {typeNameId, typeAreaId, typeTimeId, typeMoneyId, typeSelectId, regionStatus} = this.state;
        console.log(typeMoneyId + 'typeMoneyId');
        this.props.onGetType(
            {
                classTypeId: typeNameId,
                regionId: typeAreaId,
                regionStatus: regionStatus || -1,
                tgTypeId: typeTimeId,
                moneyId: typeMoneyId,
                selectList: typeSelectId,
            }
            )
    };

    xianshiModel = () => {
        this.props.onShowModel();
    };

    render() {
        const {typeNameWrapText, typeName, typeAreaWrapText, typeArea,
            typeTimeWrapText, typeTime, typeMoneyWrapText, typeMoney,
            typeSelectWrapText, typeSelect
        } = this.state;
        const {getType} = this.props;
        //getType 1 教练筛选列表 2地图 3 教室筛选列表
        return (
            <View className="List-head">
                {(getType == 2 || getType == 3) &&(
                    <View className="shop-sort-btn">
                        <Picker className="vocations-picker" mode='multiSelector' range={[typeSelectWrapText]} onChange={this.onChangeType.bind(this, 'typeSelect')}>
                            <View className={classNames('picker',{pickerColor: typeSelect !== '全部'})}>
                                {typeSelect}
                            </View>
                        </Picker>
                        <Image className="shop-sort-img" src={icon}></Image>
                    </View>
                )}
                {getType != 3 &&(
                    <View className="shop-sort-btn">
                        <Picker className="vocations-picker" mode='multiSelector' range={[typeNameWrapText]} onChange={this.onChangeType.bind(this, 'typeName')}>
                            <View className={classNames('picker',{pickerColor: typeName !== '全部'})}>
                                {typeName}
                            </View>
                        </Picker>
                        <Image className="shop-sort-img" src={icon}></Image>
                    </View>
                )}
                <View className="shop-sort-btn">
                    <Picker className="vocations-picker" mode='multiSelector' range={[typeAreaWrapText]} onChange={this.onChangeType.bind(this, 'typeArea')}>
                        <View className={classNames('picker',{pickerColor: typeArea !== '全部'})}>
                            {typeArea}
                        </View>
                    </Picker>
                    <Image className="shop-sort-img" src={icon}></Image>
                </View>
                {getType != 1 &&(
                    <View className="shop-sort-btn">
                        <Picker className="vocations-picker" mode='multiSelector' range={[typeTimeWrapText]} onChange={this.onChangeType.bind(this, 'typeTime')}>
                            <View className={classNames('picker',{pickerColor: typeTime !== '全部'})}>
                                {typeTime}
                            </View>
                        </Picker>
                        <Image className="shop-sort-img" src={icon}></Image>
                    </View>
                )}
                {getType == 1 &&(
                    <View className="shop-sort-btn">
                        <Picker className="vocations-picker" mode='multiSelector' range={[typeMoneyWrapText]} onChange={this.onChangeType.bind(this, 'typeMoney')}>
                            <View className={classNames('picker',{pickerColor: typeMoney !== '全部'})}>
                                {typeMoney}
                            </View>
                        </Picker>
                        <Image className="shop-sort-img" src={icon}></Image>
                    </View>
                )}
                {getType != 2 &&(
                    <View className="shop-sort-btn" onClick={this.xianshiModel}>更多</View>
                )}
            </View>
        )
    }
}

export default ListHead;

